<template>
	<view>
		<block v-if="evaluate.length">
			<view class="evaluate" v-for="(item) in evaluate" :key="item.ID">
				<view class="evaluate_main">
					<view class="evaluate_user">
						<view class="headimg">
							<image :src="item.HeadImgUrl" mode="aspectFill"></image>
						</view>
						<view class="evaluate_info">
							<view class="evaluate_name">
								{{ item.Name || '--' }}

							</view>
							<view class="evaluate_time">
								{{ getTime(item.EvalTime) }}
							</view>
						</view>
					</view>
					<view class="evaluate_box">
						总体：
						<image :src="whatStar(item.EvalScore, i, 0)" mode="" v-for="(el, i) in 5" :key="i"></image>
						<text style="margin-left: 10rpx">{{ item.EvalScore }}</text>
					</view>
					<view class="evaluate_text">
						{{ item.Content }}
					</view>
					<view class="evaluate_img" v-if="returnImgList(item.Imgs).length > 0">
						<view class="img" v-for="(el, i) in returnImgList(item.Imgs)" :key="el.ID"
							@click.stop="evaLookImg(item.Imgs, i)">
							<image :src="el" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="empty" v-else>
			<EmptyBox text="暂无评价～"></EmptyBox>
		</view>
		<BtmLogo></BtmLogo>
		<view style="height:140rpx;" v-if="teacherInfo && teacherInfo.IsMyEval == 0"></view>
		<view class="btm wap" v-if="teacherInfo && teacherInfo.IsMyEval == 0">
			<view class="btn1" style="width: 100%;"
				@click="nav_to(`/pages/teacher/user_evaluate?id=${teacherInfo.ID}`)">
				<uni-icons type="chat" size="24" color="#000"></uni-icons>
				<text>评价</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ID: '',
			shopId: '',
			evaluate: [],
			teacherInfo: {}
		};
	},
	async onLoad(e) {
		this.shopId = e.shopId || ''
		await this.EvalList()
	},
	onunload() {
		uni.$off('evaluate');
	},
	computed: {
		getTime() {
			return (l) => {
				let d = new Date(l);
				let timestamp = d.getTime();
				let d2 = new Date();
				let timestamp2 = d2.getTime();
				if (timestamp2 - timestamp < 30 * 24 * 60 * 60 * 1000) {
					return this.$u.timeFrom(timestamp, 'mm-dd hh:MM');
				} else {
					return this.$u.date(timestamp, 'mm-dd hh:MM');
				}
			};
		},
	},
	methods: {
		//判断是已灰色星星还是黄色（选中）状态的星星 num:分数 lindex:判断是否是总体，如果是为0 否为1,sindex:当前是第几颗星星
		whatStar(num, sindex, lindex = 1) {
			let staring;
			let starhalf;
			let stared;
			if (lindex == 0) {
				//总体高亮
				staring = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853354322424.png';
				//总体半亮
				starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853365936666.png';
				//总体灰色
				stared = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138537770581315.png';
			} else {
				staring = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533786641363.png';
				starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533895031496.png';
				stared = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853790278774.png';
			}

			const starNum = sindex + 1;
			return num - starNum >= 0 ? staring : num - starNum == -0.5 ? starhalf : stared;
		},
		async EvalList() {
			let res = await this.$api.post('Products/EvalList', { ProductID: this.shopId, PageIndex: 1, PageSize: 10 });
			this.evaluate = res.data || [];
			if (this.evaluate.length) {
				this.evaluate.forEach((item) => {
					item.CreateTime = uni.$u.timeFormat(item.CreateTime, 'yyyy-mm-dd hh:MM:ss');
				});
			}
		},
		evaLookImg(imgs, index) {
			let urls = this.returnImgList(imgs);
			uni.previewImage({
				urls,
				current: index
			});
		},
		returnImgList(img){
			let list = img==''?[]:img.split(',');
			return list
		},
	}
};
</script>

<style lang="scss">
.evaluate {
	padding: 0rpx 26rpx;

	.evaluate_main {
		border-radius: 16rpx;
		// background-color: #2e2e2e;
		padding: 10rpx 26rpx;
	}

	.evaluate_user {
		display: flex;

		.headimg {
			margin-right: 20rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}

		.evaluate_info {
			.evaluate_name {
				display: flex;
				align-items: center;
				margin-right: 10rpx;

				.member {
					min-width: 90rpx;
					height: 32rpx;
					background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
					border-radius: 2rpx;
					border: 2rpx solid #d6c6ab;
					text-align: center;
					color: #fff !important;
					font-size: 16rpx;
					line-height: 32rpx;
					margin-left: 10rpx;
				}

				.member_huan {
					color: #333 !important;
					background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
					border: 2rpx solid #e6ceb5;
				}

				.member_hei {
					color: #4c310c;
					background: linear-gradient(180deg, #ffffff 0%, #000000 100%);
					border: 2rpx solid #e6ceb5;
				}

				.member_hei_vip {
					color: #4c310c;
					background: linear-gradient(180deg, #ffffff 0%, #000000 100%);
					border: 2rpx solid #e6ceb5;
				}

				.member_wealth {
					width: 45rpx;
					height: 32rpx;
					background: linear-gradient(135deg, #deb214 0%, #f88410 100%);
					border-radius: 2rpx;
					border: 2rpx solid #d6c6ab;
					text-align: center;
					color: #fff;
					font-size: 16rpx;
					line-height: 32rpx;
					margin-left: 5rpx;
				}
			}

			.evaluate_time {
				margin-top: 20rpx;
				color: #999999;
				font-size: 22rpx;
			}
		}
	}

	.evaluate_box {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-bottom: 10rpx;

		image {
			padding: 4rpx;
			width: 34rpx;
			height: 34rpx;
		}
	}

	.evaluate_litbox {
		margin: 10rpx auto;
		display: flex;
		align-items: center;

		.eva_lit {
			margin-right: 14rpx;
			font-size: 22rpx;
		}
	}

	.evaluate_text {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.evaluate_img {
		display: flex;
		flex-wrap: wrap;

		.img {
			border-radius: 16rpx;
			width: 140rpx;
			height: 140rpx;
			overflow: hidden;
			margin-right: 28rpx;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.img:nth-child(4n) {
			margin-right: 0;
		}
	}
}

.empty {
	// background: #111;
	min-height: 500rpx;
}

.btm {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 144rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
	display: flex;
	justify-content: space-between;

	.btn1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 320rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
		border-radius: 12rpx;

		image {
			height: 40rpx;
			width: 40rpx;
			margin-right: 8rpx;
		}

		text {
			color: #4c310c;
			font-size: 34rpx;
			text-shadow: 0px 2px 2px rgba(141, 107, 62, 0.7);
		}
	}

	.btn2 {
		width: 320rpx;
		//width: 100%;
		height: 96rpx;
		background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			height: 40rpx;
			width: 40rpx;
			margin-right: 8rpx;
		}

		text {
			font-size: 34rpx;
			color: #1f1f1f;
			line-height: 34px;
			text-shadow: 0px 2px 2px rgba(132, 108, 82, 0.8);
		}

		.red_tips {
			width: 134rpx;
			height: 50rpx;
			border-radius: 18rpx;
			font-size: 24rpx;
			color: #fff;
			background-color: #fd4c61;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: -158rpx;
			margin-top: -88rpx;
		}
	}
}
</style>
